<template>
    <div class="main-item">
        <div class="article-author">
                            <img  src="../assets/images/head.png" alt="author" class="article-picture">
                            <span class="name">作者：{{item.user.username}}</span>
                            <span class="position">职位：{{item.user.position}}</span>
                            <span class="sex" v-if="item.user.gender == 'wument'">是个小姐姐诶</span>
                            <span class="sex" v-else>是个小帅锅诶</span>
                            <span class="del" v-if="this.isAdmin" @click.stop="del(item)">
                                <i class="el-icon-circle-close-outline el-input__icon" slot="suffix"></i>
                            </span>
                        </div>
                        <div class="article-content">
                        {{item.content}}
                        </div>
                        <div class="article-reviews">
                            <span class="time">{{item.createTime}}</span>
                        </div>
        </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "commentItem",
  props: {
    item: Object
  },
  data() {
    return {

    };
  },
  methods:{
    del(itemObj){
        this.axios.delete("/homeApl/solution/" + itemObj.solutionId)
        .then(response => {
          if (response.data.code == 0) {
            this.$emit("refurbishedDetails");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  computed:{
    ...mapState({
      isAdmin:'isAdmin'
    })
  }
};
</script>

<style scoped lang="scss">
.main-item {
  background: #ffffff;
  width: 99%;
  padding: 20px;
  box-sizing: border-box;
  margin: 20px auto;
  cursor: pointer;
  .article-author {
    height: 40px;
    line-height: 40px;
    position: relative;
    .article-picture {
      vertical-align: middle;
    }
    .name {
      margin: 0 10px;
    }
    .position {
      color: #2b27278f;
      margin-right: 10px;
    }
    .sex {
      color: #2a36c7;
    }
    .del {
      position: absolute;
      right: 10px;
      top: 0px;
      margin-right: 20px;
    }
  }
  .article-content {
    text-indent: 40px;
    letter-spacing: 1px;
  }
  .article-reviews{
    height: 30px;
    line-height: 30px;
    .time{
      float: right;
      color: #8a8b99
    }
  }
}
</style>